<template>
	<div class="gift-popup">
		<el-card class="memorial-shop-card" body-style="padding: 0;">
			<!-- Header Tabs -->
			<div class="shop-header">
				<span>祭奠确认</span>
				<el-button class="close-btn" :icon="CloseBold" link @click="handleClose" />
			</div>

			<!-- Content Area (Only showing content for '献花' tab) -->
			<div class="shop-content">
				<!-- Item Grid with Scroll -->
				<div class="item-grid-container">
					<el-input v-model="confirmationMessage" type="textarea" :rows="3" placeholder="输入祭奠寄语 (可选)"
						class="confirmation-message" />
					<div class="cost-info">
						本次敬献需要 {{ selectedItem?.price ?? 0 }} 永恒币，扣除方式：
					</div>
					<el-radio-group v-model="paymentMethod" class="payment-options">
						<div class="payment-option">
							<el-radio label="user_account">用户永恒币 <span style="margin-left: 10px;color: #333;font-size: 12px;">可用 {{ userBalance }}</span></el-radio>
						</div>
						<div class="payment-option">
							<!-- 假设公共账户不可用 -->
							<el-radio label="public_account" disabled>本馆公共账户 <span  style="margin-left: 10px;color: #333;font-size: 12px;">可用 {{ publicBalance }}</span></el-radio>
						</div>
					</el-radio-group>
					<div class="dialog-footer">
						<el-button type="primary" @click="handleSubmit">确认敬献</el-button>
						<el-button @click="handleClose">取消本次敬献</el-button>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, shallowRef, watch, nextTick, defineExpose, toRaw } from 'vue';
import { CloseBold, Clock, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue';
import { apiMuGiftList } from '@/api/gift'
import useUserStore from '@/stores/modules/user'
import feedback from '@/utils/feedback';
import { useRouter } from 'vue-router';
const userStore = useUserStore()
const router = useRouter()
// const emit = defineEmits(['success', 'close'])
const emit = defineEmits<{
	(e: 'success', params: object): void;
	(e: 'close'): void;
}>()

const props = defineProps({
	muDetail: {
		type: Object,
		default: () => ({})
	}
})
// Dummy data to represent the items shown in the screenshot

const confirmationMessage = ref('')
const paymentMethod = ref('user_account')
const userBalance = ref(0)
userBalance.value = userStore.userInfo.user_coin
const publicBalance = ref(0)
publicBalance.value = userStore.userInfo.user_money

const selectedItem = ref<Object | null>(null)

const handleSubmit = async () => {
	console.log('确认献花', selectedItem.value, userStore.userInfo)
	let price = props.muDetail?.type == 1 ? selectedItem.value?.price : props.muDetail.value?.type == 2 ? selectedItem.value?.vip_price : selectedItem.value?.svip_price
	if(userStore.userInfo.user_coin < price){
		emit('close')
		await feedback.confirm('余额不足，是否前往充值？')
		// router.push({name: 'memorialManage/payInfo'})
		router.push('memorialManage/payInfo')
		console.log('余额不足', userStore.userInfo.user_coin, price)

		feedback.notifyError_vice('余额不足',{
			zIndex: 99999
		})
		return
	}
	let params = {...selectedItem.value, confirmationMessage: confirmationMessage.value}
	emit('success', params)
}

const handleClose = () => {
	emit('close')
}

const open = (type = 'add') => {
	
}
const setFormData = (data: Record<any, any>) => {
	console.log(data.selectItem)
	selectedItem.value = data.selectItem
}

defineExpose({
	open,
	setFormData
})
</script>

<style scoped lang="scss">
.memorial-shop-card {
	width: 650px; // Adjust width to match the image
	background-color: #fdfbf6; // Approximate background color
	border: 1px solid #e0e0e0;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	position: relative; // For absolute positioning of close button
}

.shop-header {
	position: relative;
	padding: 0 15px; // Add padding to align tabs
	border-bottom: 1px solid #eee;
	background-color: #f9f6f0; // Slightly different shade for header
}

// Style Element Plus Tabs
:deep(.el-tabs__header) {
	margin: 0; // Remove default bottom margin
}

:deep(.el-tabs__nav-wrap::after) {
	content: none; // Remove the default bottom border of the tab header
}

:deep(.el-tabs__item) {
	color: #666;
	padding: 0 15px; // Adjust padding
	height: 45px; // Adjust height
	line-height: 45px;

	&:hover {
		color: #c0392b; // Example hover color
	}

	&.is-active {
		color: #333; // Active tab color
		font-weight: bold;
		// Add a subtle indicator if needed, e.g., border-bottom
		// border-bottom: 2px solid #c0392b;
	}
}

:deep(.el-tabs__active-bar) {
	// Hide default active bar or style it differently if needed
	// display: none;
	background-color: #c0392b; // Example active bar color
	height: 2px;
}

.close-btn {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	font-size: 18px;
	color: #999;

	&:hover {
		color: #555;
	}
}

.shop-content {
	padding: 10px 15px 15px 15px;
}

.sub-filters {
	margin-bottom: 15px;
	display: flex;
	gap: 20px;
	padding-left: 5px; // Small indent
}

.filter-item {
	font-size: 14px;
	color: #666;
	cursor: pointer;
	padding: 5px 0; // Add some vertical padding

	&.active {
		color: #c0392b; // Active filter color (example)
		font-weight: bold;
		border-bottom: 2px solid #c0392b; // Active indicator
	}

	&:hover {
		color: #c0392b;
	}
}

.item-grid-container {
	position: relative; // For positioning scroll arrows
}

.item-grid {
	padding-right: 25px; // Make space for scroll arrows if needed
}

.scroll-arrows {
	position: absolute;
	right: 5px; // Position next to the scrollbar area
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: #aaa;
	font-size: 16px;

	.el-icon {
		cursor: pointer;

		&:hover {
			color: #666;
		}
	}
}


.shop-item {
	text-align: center;
	margin-bottom: 15px; // Space below each item
	background-color: #fff; // White background for items
	border: 1px solid #eee;
	border-radius: 3px;
	padding: 10px 5px 5px 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 155px; // Fixed height for alignment
	box-sizing: border-box;
}

.item-image-placeholder {
	width: 80px; // Adjust size as needed
	height: 80px; // Adjust size as needed
	background-color: #f0f0f0; // Placeholder color
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ccc;
	font-size: 12px;
	// Optionally add a placeholder icon or text:
	// &::after { content: 'Image'; }
}

.item-name {
	font-size: 13px;
	color: #333;
	margin: 0 0 5px 0;
	white-space: nowrap; // Prevent wrapping
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.item-price {
	font-size: 12px;
	color: #888;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px; // Space between elements
	line-height: normal; // Reset line height

	.free {
		color: #e67e22; // Orange color for 'Free'
		font-weight: bold;
	}

	.el-icon {
		font-size: 12px; // Match text size
		position: relative;
		//   top: 1px; // Slight vertical alignment
	}
}

.scroll-hint {
	text-align: center;
	font-size: 13px;
	color: #999;
	margin-top: 10px;
	padding: 5px 0;
	background-color: #f9f6f0; // Match header background
	border-top: 1px solid #eee;
	margin: 10px -15px -15px -15px; // Extend to card edges
	border-bottom-left-radius: 4px; // Match card radius
	border-bottom-right-radius: 4px;
}

// Fine-tune scrollbar appearance if needed
:deep(.el-scrollbar__bar.is-vertical) {
	width: 6px; // Slimmer scrollbar
	opacity: 0.7;
}

:deep(.el-scrollbar__thumb) {
	background-color: #ccc; // Lighter thumb
	border-radius: 3px;
}

.gift-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.payment-option{
	margin-right: 20px;
}
</style>